
<script setup lang="ts">
import LeftCan from './LeftCan.vue';
import Brick from './Brick.vue';
import RightCan from './RightCan.vue';
import { useRoute } from 'vue-router';
import router from '../router/router';
const route = useRoute();
function get (){
    console.log()
    console.log(router)
}
</script>

<template>
    <!-- <button @click="get"></button> -->
    <div class="mid">
        <div class="brick">
        <Brick :key="route.path+route.query.id"></Brick>
        <!-- {{ router }} -->
        </div>
    </div>
    <div class="right">
        <RightCan></RightCan>
    </div>
</template>
<!-- scoped的作用是让各个组件之间的样式不会互相干扰 -->
<style scoped>
.right{
    margin-top: 10px;
    margin-left: 120px;
    float: left;
    height: 680px;
}
.brick{
    /* display: flex; */
    margin-top: 10px ;
}
.mid{
    float: left;
    /* margin-left: 30px; */
    width: 400px;   
}
.left{
    background: url(../public/static/left.png) no-repeat;
    /* background-color: aqua; */
    width: 100px;
    height: 700px;
    float: left;
}

.topBanner{
    align-content: center;
    background: url(../public/static/top.png) no-repeat;
    padding: 2px;
    width: 845px;
    height: 85px;
    /* background-color: aquamarine; */
    /* box-shadow: 3px 5px 5px; */
    /* border-radius: 13px 13px 0px 0px; */
    
}
.topBanner button{
    float: left;
    margin-left: 20px;
    margin-top: 40px;
}
#logo{
    margin-top: 40px;
    float: left;
}
</style>
